<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="wih1h=device-wih1h, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .box {
      display: flex;
      width: 980px;
      margin: auto;
    }
    .box2 {
      display: flex;
    }
    .box > img {
      width: 220px;
      height: 60px;
    }
    .box3 {
      position: relative;
      margin-right: 10px;
    }
    .box3 > h1 {
      display: inline-block;
      line-height: 100px;
      padding: 0 15px;
      text-align: center;
      font-weight: normal;
      font-size: 15px;
      color: #777;
      transition: all 0.2s linear;
    }
    .box3 > h1:hover {
      background: #174fa4;
      color: white;
    }

    
    .u1 {
      /* display: none; */
      width: 160px;
      position: absolute;
      top: 100px;
      background-color: #174fa4;
      transition: all 0.2s linear;
      /* padding: 20px 0; */
      height: 0;
      opacity: 0;
    }
    .u1 > li {
      font-size: 14px;
      line-height: 30px;
      padding-left: 35px;
      color: white;
      transition: all 0.2s linear;
    }
    .u1 > li:hover {
      padding-left: 40px;
      background-color: #205cb7;
    }
    h2{
      display: inline-block;
      line-height: 100px;
      padding: 0 15px;
      text-align: center;
      font-weight: normal;
      font-size: 15px;
      color: #777;
      transition: all 0.2s linear;
    }
    h2:hover{
      background-color: #174fa4;
      color: white;
    }
    .u1 > li{
      background: url(http://www.zzkjg.com/images/nav_xx3.png) no-repeat 20px center;

    }
  </style>
  <body>
    <div class="box">
      <img src="http://www.zzkjg.com/images/logo.jpg" alt="" />
      <div class="box2">
       
          <h2>首页</h2>
      
        <div class="box3">
          <h1>概况</h1>
          <ul class="u1">
            <li><a>科技馆介绍</a></li>
            <li><a>馆内资讯</a></li>
            <li><a>通知公告</a></li>
            <li><a>通知公告</a></li>
          </ul>
        </div>
        <div class="box3">
          <h1>楼层展览</h1>
          <ul class="u1">
            <li><a>展馆一层</a></li>
            <li><a>展馆二层</a></li>
            <li><a>展馆三层</a></li>
            <li><a>临时展览</a></li>
          </ul>
        </div>
        <div class="box3">
          <h1>科普活动</h1>
          <ul class="u1">
            <li><a>科普大篷车</a></li>
            <li><a>科普报告会</a></li>
            <li><a>馆校结合</a></li>
            <li><a>魅力科学会堂</a></li>
            <li><a>科普表演剧</a></li>
            <li><a>理论广角</a></li>
            <li><a>创客训练营</a></li>
            <li><a>数学实验室</a></li>
          </ul>
        </div>

        <div class="box3">
          <h1>影院影讯</h1>
          <ul class="u1">
            <li><a>影院介绍</a></li>
            <li><a>播放场次</a></li>
            <li><a>影片介绍</a></li>
          </ul>
        </div>

        <div class="box3">
          <h1>科普志愿者</h1>
          <ul class="u1">
            <li><a>志愿者管理办法</a></li>
            <li><a>志愿者风采</a></li>
            <li><a>网上申请</a></li>
          </ul>
        </div>

        <div class="box3">
          <h1>咨询服务</h1>
          <ul class="u1">
            <li><a>开馆时间</a></li>
            <li><a>失物招领</a></li>
            <li><a>乘车路线</a></li>
            <li><a>参观须知</a></li>
            <li><a>联系我们</a></li>
          </ul>
        </div>
        <div class="box3">
          <h1>报名入口</h1>
          <ul class="u1">
            <li><a>资源下载</a></li>
            <li><a>科学运动会报名</a></li>
            <li><a>科普大篷车报名</a></li>
          </ul>
        </div>
      </div>
    </div>
    <script>
      // 获取元素
      let box = document.querySelector(".box");
      let box3 = document.querySelectorAll(".box3");
      let uls = document.querySelectorAll("ul");
      let h1s = document.querySelectorAll(".box3>h1");
      console.log(box3.length);

      //给h1s设置鼠标移入事件
      for (let i = 0; i < box3.length; i++) {
        box3[i].onmouseenter = function () {
          //排他思想
          for (let k = 0; k < uls.length; k++) {
            uls[k].style.height = "0";
            uls[k].style.padding = "0";
            uls[k].style.opacity ='0'
          }
          let hei = uls[i].children.length * 30 + "px";
          console.log(hei);
          uls[i].style.height = hei
          uls[i].style.padding ='20px 0'
          h1s[i].style.background=' #174fa4';
          h1s[i].style.color=' white';
          uls[i].style.opacity ='1'
        
        };
      }
     for(let i = 0 ; i<h1s.length;i++){
      box3[i].onmouseleave = function () {
        uls[i].style.height = "0"
        uls[i].style.padding = "0"
        h1s[i].style.color='#777';
        h1s[i].style.background='';
      }
     }
    </script>
  </body>
</html>
